In order to for an application to function, a developer needs to know all of the resources which must be included. Traditionally, application developers have been required to manually determine which resources are needed, and the correct loading order so that the browser can load the application and not to return an error message.
Unfortunately, the difficulty with putting all of the pieces in order is knowing which resource files or resources depend on other resources being loaded first. This is extremely problematic when a developer has to make a change to an application in some way. In this example, the developer is required to go back and ensure the new code is put into the right order for the browser to display the application and render the new feature usable. Any changes also may cause other resources to change their dependencies and therefore change the overall ordering of the resource loading. Loading resource out of order can result in unintended behavior and errors.
An example of the importance in web applications of the order in which resources are loaded into the browser is illustrated and discussed below. Consider the following two Cascade Style Sheet (CSS) files: A.css shown in FIGS. 1A and B.css shown in FIG. 1B. If A.css is loaded before B.css, then the resulting BODY style is illustrated in FIG. 2A. If however, B.css is loaded before A.css, then the resulting BODY style is illustrated in FIG. 2B.
Since a developer clearly wants a resulting application to use consistent and intended styling, it is important for the developer to be able to define which resource file is loaded first. Traditionally this is done by hard coding references to the CSS resource files in the correct order within an HTML file. An example of how two such CSS resource files would be loaded in a traditional web application is illustrated in FIG. 3. The browser would load resource file A.css and then resource file B.css because that is the order they are referenced in.
This same problem also will occur with other types of resource files. For example, consider two JavaScript resource files: resource file A.js shown in FIG. 4A and resource file B.js in FIG. 4B. If resource file B.js is loaded before resource file A.js, then the JavaScript error illustrated in FIG. 5 will occur. However, if resource file A.js is loaded before resource file B.js, then the browser will open an alert dialog with the text “Hello World” as intended. To ensure that resource file A.js always is loaded before resource file B.js, the order in which these scripts are loaded is hard coded into the HTML document that uses them. An example of an HTML document file that includes resource file A.js and resource file B.js in the correct order is illustrated in FIG. 6.
Accordingly, when the number of resource files increases, the difficulty of maintaining hard coded and correctly ordered lists of resources in the HTML file becomes very challenging and time consuming. By way of example, consider the HTML file shown in FIG. 7 and assume initially all of the necessary resource files are in the correct loading order. If subsequently a change is made to resource file C.js. The change involves calling a function defined in resource file D.js, which is currently loaded after resource file C.js. This change will require resource file D.js to be moved prior to resource file C.js, which may require the relocation of several other resource files in order to maintain the dependent relationships resource file D.js may have had with all of its preceding scripts, such as calling a function from resource file D.js which is defined in resource file N.js by way of example. As this example illustrates, maintaining the correct resource dependency becomes increasingly more difficult to manage as the number of resources increases.